<template>
  <div class="meas-container">
  <ToolCard @click="test" :measTools="measTools"/>
  </div>
</template>

<script setup name="Meas">
import ToolCard from "@/components/toolCard/index.vue";

import { reactive, toRefs, ref,defineExpose } from "vue";

// 直接将 measTools 放入数据对象中
const data = reactive({
  measTools: [
    {
      id: 1,
      name: "垂直测距", //标题名
      icon: "垂直测距", //svg 图标名
      flag: false, 
      addType: "add", //添加或移除
      helpTip:"垂直测距，量测两点之间的垂直高度差。"  //鼠标移入帮助提示信息
    },
    {
      id: 2,
      name: "三角测量",
      icon: "三角测量",
      flag: false,
      addType: "add",
      helpTip:"三角测量，量测两点之间的高度差、直线测距、水平距离。"
    },
    {
      id: 3,
      name: "直线测距",
      icon: "直线测距",
      flag: false,
      addType: "add",
      helpTip:"直线测距，又称空间距离，测量两点之间空间直线距离。"
    },
    {
      id: 4,
      name: "贴地测距",
      icon: "贴地测距",
      flag: false,
      addType: "add",
      helpTip:"贴地距离，又称地表距离，是量算两点之间沿着地形起伏地表最短距离。"
    },
    {
      id: 5,
      name: "水平测距",
      icon: "水平测距",
      flag: false,
      addType: "add",
      helpTip:"水平测距，又称平面测距、椭球表面测距，测量两点之间基于同一水平面的水平距离。"
    },
    {
      id: 6,
      name: "地表面积",
      icon: "地表面积",
      flag: false,
      addType: "add",
      helpTip:"地表面积，又称贴地面积，测量多边形区域范围贴于地形表面的面积。"
    },
    {
      id: 7,
      name: "空间面积",
      icon: "空间面积(1)",
      flag: false,
      addType: "add",
      helpTip:"空间面积，测量多边形的空间面积。"
    },
    {
      id: 8,
      name: "投影面积",
      icon: "投影面积",
      flag: false,
      addType: "add",
      helpTip:"投影面积，测量多边形投影到同一水平面后的投影水平面积。"
    },
    {
      id: 9,
      name: "夹角测量",
      icon: "夹角测量",
      flag: false,
      addType: "add",
      helpTip:"夹角量测，测量绘制三角形的夹角数值。"
    },
    {
      id: 10,
      name: "方位角测量",
      icon: "方位角测量",
      flag: false,
      addType: "add",
      helpTip:"方位角量测，测算两点之间与正北方向的水平方位角差。"
    },
    {
      id: 11,
      name: "体积测量",
      icon: "体积测量",
      flag: false,
      addType: "add",
      helpTip:"体积量测，量测分析绘制区域空间体积、截面体积、挖方体积等量。"
    },
  ],
});


const { measTools } = toRefs(data);
const measToolsCopy = ref(measTools.value);
const filterToolsByName = (searchValue) => {
  measTools.value  = measToolsCopy.value.filter(tool => tool.name.includes(searchValue));
};


const test = () => {
  console.log("test");
};
defineExpose({
  measTools,
  filterToolsByName
});


</script>

<style lang="scss" scoped>
.meas-container {
 
}
</style>
